<template>
  <div class="page">
    <!-- 顶部栏 -->
    <Base-Navbar title="绩效考核" left-arrow></Base-Navbar>

    <div class="container">
      <!-- Tab -->
      <div class="mb-10">
        <Base-Tab v-model:index="tabIndex"></Base-Tab>
      </div>

      <!-- Tab -->
      <div class="mb-10">
        <Base-Tab
          :type="2"
          :tabs="selects.kpis"
          v-model:index="tabIndex"
        ></Base-Tab>
      </div>

      <div class="fz-13">
        <!-- 销售明细 -->
        <div v-if="tabIndex === 0">
          <ul class="list">
            <li class="item box opacity ta-center" v-for="(v, i) in 5" :key="i">
              <div class="cl-primary">
                <span>类型：</span>
                <span>直推</span>
              </div>

              <div class="flex flex-center cl-success">
                <div class="mr-30">
                  <span>销售总额：</span>
                  <span>100 U</span>
                </div>

                <div>
                  <span>佣金：</span>
                  <span>100 U</span>
                </div>
              </div>

              <div>
                <span>时间：</span>
                <span>2023/11/30 15:00</span>
              </div>

              <div>
                <span>销售渠道：</span>
                <span>购物</span>
              </div>
            </li>
          </ul>
        </div>

        <!-- 绩效考核 -->
        <div v-else-if="tabIndex === 1">
          <div class="box opacity mb-10">
            <div class="ta-center">
              <span>当前等级：</span>
              <span>v1</span>
            </div>

            <div class="flex flex-rb">
              <div>
                <span>实时直推销售额：</span>
                <span>2000 U</span>
              </div>

              <div>
                <span>实时间推销售额：</span>
                <span>2000 U</span>
              </div>
            </div>

            <div class="flex flex-rb">
              <div>
                <span>直推有效销售额：</span>
                <span>2000 U</span>
              </div>

              <div>
                <span>间推有效销售额：</span>
                <span>2000 U</span>
              </div>
            </div>

            <div class="flex flex-rb">
              <div>
                <span>直推剩余升级额：</span>
                <span>2000 U</span>
              </div>

              <div>
                <span>间推剩余升级额：</span>
                <span>2000 U</span>
              </div>
            </div>

            <div class="ta-center">
              <span>比例：</span>
              <span>10%</span>
            </div>

            <div class="ta-center">
              <span>剩余考核时间：</span>
              <span>5天</span>
            </div>
          </div>

          <div class="table box opacity">
            <div class="table__th">
              <div class="table__td">等级</div>
              <div class="table__td">直推业绩</div>
              <div class="table__td">间推业绩</div>
              <div class="table__td">考核周期</div>
              <div class="table__td">比例</div>
            </div>

            <div class="table__tr" v-for="(v, i) in 5" :key="i">
              <div class="table__td">1</div>
              <div class="table__td">400</div>
              <div class="table__td">800</div>
              <div class="table__td">7</div>
              <div class="table__td">10%</div>
            </div>
          </div>
        </div>

        <!-- 规则说明 -->
        <div v-else>
          <div class="flex flex-center mb-10">
            <van-image
              style="width: 100%"
              class="radius radius--lg"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
            ></van-image>
          </div>

          <div class="flex flex-center mb-10">
            <van-image
              style="width: 100%"
              class="radius radius--lg"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
            ></van-image>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

import selects from 'js/selects'

const tabIndex = ref(0)
</script>

<style lang="scss" scoped></style>
